<template>
    <div>
        <!-- 顶部栏 -->
        <header>
            <span class="iconfont icon-caidan" @click="showPopup"></span>
            <van-popup
              v-model="show"
              closeable
              position="left"
              :style="{ height: '100%', width: '90%' }"
            ><Popup></Popup></van-popup>
            <slot name="txt"></slot>
            <slot name="set"></slot>
            <slot name="icon"></slot>
        </header>
    </div>
</template>

<script>
import Popup from '@/components/common/PopupCmp/Popup.vue'
export default {
    name: 'HeaderCmp',
    components: {
        Popup
    },
    data() {
        return {
            show: false,
        };
    },

    methods: {
        showPopup() {
            this.show = true;
        },
    },
}

</script>

<style lang="scss" scoped>
@import "@/static/common/base.scss";
@import "@/assets/iconfont/iconfont.css";

header {
    background-color: $bgColor;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 10px;

    .iconfont {
        font-size: 26px;
        color: rgb(255, 255, 255);
    }

    .van-overlay {
        
    }
}
</style>
